<!--
 * @Author: pancc 527847805@qq.com
 * @Date: 2023-04-18 10:05:40
 * @LastEditors: pancc 527847805@qq.com
 * @LastEditTime: 2023-04-18 15:28:48
 * @FilePath: \pcj\src\page\whs\components\whInfoEdit.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
    <div class="whinfostorageedit">
        <el-dialog draggable v-model="dialog.show" width="400px" :before-close="handleClose" class="custom-dialog">
            <template #header> {{ props.editData.id ? '修改' : '新增' }}库位 </template>
            <el-form :model="forms" ref="registerRef" :rules="rules" label-width="100"
                class="dis-flex flex-dir-column flex-center">
                <el-form-item label="仓库" prop="whInfoId">
                    <el-select v-model="forms.whInfoId" placeholder="编号" autofocus clearable class="width-220">
                        <el-option v-for="n in forms.whInfos" :key="n.id" :label="n.whInfoName" :value="n.id"></el-option>
                    </el-select>
                </el-form-item> 
                <el-form-item label="编号" prop="storageSerialNo">
                    <el-input v-model="forms.storageSerialNo" placeholder="编号" autofocus clearable
                        class="width-220"></el-input>
                </el-form-item>
                <el-form-item label="名称" prop="stroageName">
                    <el-input v-model="forms.stroageName" placeholder="名称" autofocus clearable class="width-220"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="statusId">
                    <el-select v-model="forms.statusId" placeholder="请选择状态" autofocus clearable class="width-220" @change="onTypeChange">
                        <el-option label="启用" :value="1"></el-option>
                        <el-option label="禁用" :value="2"></el-option>
                        <el-option label="删除" :value="3"></el-option> 
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <z-button type="" @click="handleClose" icon="close">取消</z-button>
                    <z-button icon="check" @click="onCheck" :loading="dialog.loading"> 确认 </z-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { post } from '@/api/index';
let $message = inject('$message');
let emit = defineEmits(['update:modelValue', 'onSave']);
let props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    editData: {
        type: Array,
        default: () => {
            return [];
        }
    }
});
let registerRef = ref();
let dialog = reactive({
    show: false,
    options: [],
    loading: false
});

const formsInit = () => {
    return reactive({
        whInfoId: '',
        storageSerialNo: '',
        stroageName: '',
        isDefalut: false,
        statusId: '',
        whInfos: [],
        id: 0
    });
}

let forms = formsInit();
watch(
    () => props.modelValue,
    async val => {
        dialog.show = val;
        if (!val) return;
        let formData = formsInit();
        Object.keys(formData).map(r => {
            forms[r] = props.editData[r] != undefined ? props.editData[r] : formData[r];
        }); 
    },
    {
        immediate: true
    }
);
let rules = {
    whInfoId: [{ required: true, trigger: 'blur', message: '仓库不能为空!' }],
    storageSerialNo: [{ required: true, trigger: 'blur', message: '编号不能为空!' }],
    stroageName: [{ required: true, trigger: 'blur', message: '名称不能为空!' }],
};

const handleClose = () => {
    emit('update:modelValue', false);
};
const onCheck = () => {
    if (!registerRef.value) return;
    registerRef.value.validate(async val => {
        if (!val) return;
        try {
            dialog.loading = true;
            await post('WhInfoStorage/CreateOrUpdate', forms);
            $message.success('编辑成功');
            dialog.loading = false;
            emit('onSave',forms);
        } catch (error) {
            console.log(' WhInfoStorage/CreateOrUpdate错误', error);
            dialog.loading = false;
        }
    });
};
</script>
  
<style lang="scss" scoped>
.whinfostorageedit {
    :deep(.custom-dialog) {
        .el-dialog__body {
            height: 260px;
        }
    }
}
</style>
  